<template>
  <div class="info_card">
    <div class="info_item" :class="sItem.length <= 18 && 'row2'" v-for="(sItem, sName) of value" :key="sName">
      <span class="info_name">{{ sName }}</span>
      <div class="info_cont">{{ sItem }}</div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Object,
      default: () => ({}),
    },
  },
};
</script>

<style lang="scss" scoped>
.info_card {
  background-color: #f0f2f8;
  border: 1px solid;
  border-color: #7691bd;
  border-radius: 18px;
  padding: 16px 28px 20px;
  display: flex;
  flex-wrap: wrap;
  .info_item {
    display: flex;
    border-bottom: 1px solid rgba(#7691bd, 0.5);
    padding: 8px 0;
    &.row2 {
      width: 50%;
    }
  }
  .info_name {
    flex: none;
    width: 100px;
    font-size: 14px;
    color: rgba(#222, 0.8);
  }
}
</style>
